<link rel="stylesheet" href="${base}/static/vendor/dropify/css/dropify.min.css"/>
<style>
    td {
        padding: 5px;
    }

    .link-input {
        width: 46%;
    }

    .dropify-wrapper {
        width:92%;
    }
</style>
<div class="easyui-panel" data-options="fit:true,border:0" style="width:90%;padding: 8px">
<form id="shopAdForm" action="${base}/admin/imglib/updateShopAd.do" method="POST">
<table width="100%" height="100%" cellspace="0" cellspacing="0" border="0" >
    <tr height="50%">
        <td align="center" width="50%" style="border-right: 1px solid rgba(34, 36, 38, 0.15);border-bottom: 1px solid rgba(34, 36, 38, 0.15);">
            <input type="file" id="adDropify1" name="adImg"
                   data-default-file="${base}${adInfo[0].imgUrl}"
                   data-allowed-file-extensions="png bmp gif jpg jpeg"
                   data-max-file-size="1M"/>
            <div style="height: 10px"></div>
            <input id="adLink1" name="adLink[0]" value="${adInfo[0].imgLink}"
                   class="easyui-textbox theme-textbox-radius link-input" label="链接:"
                   data-options="prompt:'请输入跳转的网址'" />
            <input name="adImgTmp[0]" type="hidden"/>
            <input name="adId[0]" type="hidden" value="${adInfo[0].imgId}"/>
        </td>
        <td align="center" width="50%" style="border-bottom: 1px solid rgba(34, 36, 38, 0.15)">
            <input type="file" id="adDropify2" name="adImg"
                   data-default-file="${base}${adInfo[1].imgUrl}"
                   data-allowed-file-extensions="png bmp gif jpg jpeg"
                   data-max-file-size="1M"/>
            <div style="height: 10px"></div>
            <input id="adLink2" name="adLink[1]" value="${adInfo[1].imgLink}"
                   class="easyui-textbox theme-textbox-radius link-input" label="链接:"
                   data-options="prompt:'请输入跳转的网址'"/>
            <input name="adImgTmp[1]" type="hidden"/>
            <input name="adId[1]" type="hidden" value="${adInfo[1].imgId}"/>
        </td>
    </tr>
    <tr>
        <td align="center" width="50%" style="border-right: 1px solid rgba(34, 36, 38, 0.15);">
            <input type="file" id="adDropify3" name="adImg"
                   data-default-file="${base}${adInfo[2].imgUrl}"
                   data-allowed-file-extensions="png bmp gif jpg jpeg"
                   data-max-file-size="1M"/>
            <div style="height: 10px"></div>
            <input id="adLink3" name="adLink[2]" value="${adInfo[2].imgLink}"
                   class="easyui-textbox theme-textbox-radius link-input" label="链接:"
                   data-options="prompt:'请输入跳转的网址'"/>
            <input name="adImgTmp[2]" type="hidden"/>
            <input name="adId[2]" type="hidden" value="${adInfo[2].imgId}"/>
        </td>
        <td align="center" width="50%">
            <input type="file" id="adDropify4" name="adImg"
                   data-default-file="${base}${adInfo[3].imgUrl}"
                   data-allowed-file-extensions="png bmp gif jpg jpeg"
                   data-max-file-size="1M"/>
            <div style="height: 10px"></div>
            <input id="adLink4" name="adLink[3]" value="${adInfo[3].imgLink}"
                   class="easyui-textbox theme-textbox-radius link-input" label="链接:"
                   data-options="prompt:'请输入跳转的网址'"/>
            <input name="adImgTmp[3]" type="hidden"/>
            <input name="adId[3]" type="hidden" value="${adInfo[3].imgId}"/>
        </td>
    </tr>
</table>
</form>
</div>


<div style="position: absolute;bottom: 0px;left:0px;padding:5px 0px;text-align: center; width:100%; z-index:9999;background-color:rgba(34, 36, 38, 0.15)">
    <a id="updateShopAdSub" href="#" class="easyui-linkbutton button-orange button-xs l-btn l-btn-small" style="font-size:12px;width: 40%">
        <span class="l-btn-left">
            <span class="l-btn-text">
                <i class="iconfont">&#xe6b1;</i> 更新商城广告
            </span>
        </span>
    </a>
</div>
<div id="adLoadMask" class="loadMask">
    <img src="${base}/static/img/loading.gif" alt="加载中..."/>
</div>
<script src="${base}/static/js/jquery.ajaxupload.js"></script>
<script src="${base}/static/js/jquery.serializeJSON.js"></script>
<script src="${base}/static/vendor/dropify/js/dropify.js"></script>
<script>
$(function () {

    $('#updateShopAdSub').bind('click', function () {

        var formData = $('#shopAdForm').serializeJSON();

        $.post('${base}/admin/imglib/updateShopAd.do',
            formData, function (data) {
                if (data.ok) {
                    showMsg('操作成功', '更新商城广告信息成功.')
                } else {
                    showMsg('操作失败', '错误信息：'+data.msg)
                }
            }, 'json');
    });

    setTimeout(function () {

        $('input[id^=adDropify]').dropify();
        // fix div height
        $('.dropify-wrapper').css('height', Math.floor(($(document).height() - 280) / 2));

        $('input[id^=adDropify]').on('change',function(){
            uploadAdImg(this);
        });

        $('#adLoadMask').fadeOut();

    }, 2000);



});

function uploadAdImg(element) {
    var id = element.id;
    var idNo = id.substring(9, 10);
    $.ajaxFileUpload({
        url: '${base}/admin/imglib/ajaxUploadAd.do',
        secureuri: false,
        fileElementId: id,
        dataType: 'json',
        data: {'orderNo': idNo},
        success: function (data, status){
            console.info(data);
            var dr = $('.dropify-render')[parseInt(idNo)-1];
            if (dr != undefined) {
                var adImg = data.data;
                var value = new Array();
                value.push(adImg.imgName,adImg.imgUrl,adImg.imgType,adImg.imgSize);
                console.info(value.join(","))
                $($('input[name^="adImgTmp"]')[parseInt(idNo)-1]).attr('value', value.join(","));
            }
        },
        error: function (data, status, e) {
            console.info('upload file error:' + e);
        }
    });
}
</script>
